import React, { useEffect,useState } from 'react'
import {Link, useLocation} from 'react-router-dom'
import {FooterWrapper} from './style'
import classnames from 'classnames'
import { connect } from 'react-redux';
import  {
    checkmovie,
    getmovies,
    changemovienum
  }from '@/pages/Home/store/actionCreator'

  function Footer(props) {
    const { movieslist,sum } = props
    const 
    {checkmovieDispatch,
     getmoviesDispatch,
     changemovienumDispatch
    } = props
    const {pathname} = useLocation()
    useEffect(()=> {
        // window.scrollTo(0,0);
        // getmoviesDispatch() 
      },[])
    if (['/cities','/homedetail','/homedetail/actors'].indexOf(pathname) != -1) return
   
    return (
        <FooterWrapper>
            <Link to = '/home' className={classnames({active:pathname == '/home'})}>
                <i className='iconfont icon-shouye'></i>
                <span>首页</span>
            </Link>
            <Link to = '/movie' className={classnames({active:pathname == '/movie'})}>
                <i className='iconfont icon-dianying'></i>
                <span>电影/影院</span>
            </Link>
            <Link to = '/yanchu' className={classnames({active:pathname == '/yanchu'})}>
                <i className='iconfont icon-yanchu'></i>
                <span>演出</span>
            </Link>
            <Link to = '/events' className={classnames({active:pathname == '/events'})}>
                <i className='iconfont icon-saishi'></i>
                <span>体育/赛事</span>
            </Link>
            <Link to = '/mine' className={classnames({active:pathname == '/mine'})}>
                <i className='iconfont icon-wode'><span>{sum}</span></i>
                <span>我的</span>
            </Link>
        </FooterWrapper>
    )
 }

 const mapStateToProps = (state) => {
    let sum = state.Home.movieslist.reduce((total,item) => total + (item.check? 
        parseFloat(item.count) : 0),0)
    return {
      movieslist: state.Home.movieslist, 
      sum: sum
  
    }
  }
  const mapDispatchToProps = (dispatch) => {
    return {
      checkmovieDispatch(id) {
        dispatch(checkmovie(id))
      },
      changemovienumDispatch(data) {
        dispatch(changemovienum(data))
      },
      getmoviesDispatch() {
        dispatch(getmovies())
      },
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Footer))
  